{% extends "VozminoskiStoreBundle::layout.html.twig" %}
{% block content %}
<div id="main-slider" class="coda-slider-wrapper">
    <div class="coda-slider preload" id="s1">
        <div class="panel-text"></div>

        <div class="panel first slide-01">
            <h2>Берешь больше -<br />платишь меньше!</h2>
        </div>

        <div class="panel slide-02">
            <h2>Заголовок 2 -<br />на две строки</h2>
        </div>

        <div class="panel slide-03">
            <h2>Платишь берешь -<br />меньше больше!</h2>
        </div>

    </div>
    <div class="panel-mask"></div>
</div> <!-- end of .coda-slider-wrapper -->

<div id="menu" class="wrap">
    <ul class="menu">
        {% for category in categories %}
            <li {% if  category.url == categoryUrl %}class="active"{% endif %}><a href="{{ path('catalog', { 'url': category.url }) }}"><span>{{ category.name }}</span></a></li>
        {% endfor %}
    </ul>

    <div id="cart">
        <a href="#" class="count">{{ cart|length }}</a>
        <a href="{{ path('cart') }}">Корзина</a>
    </div>
</div>

<div id="featured" class="stitched wrap">
    <div class="featured-prices">
        {% for product in products %}
            <a name="small-product-{{ product.id }}"></a>
        <div class="third">
            <h2 class="price">{{ product.price }} <span style="font-size: 25px">P</span></h2>
                <div class="product">
                    <img src="{{ product.getWebPath() | apply_filter('main_page_product')}}" class="img-rounded" alt="" />
                    <div class="featured-overlay">
                        <table>
                            <tr>
                                <td class="desctiption cufon" colspan="4">{{ product.description | slice(0,120) }}...</td>
                            </tr>
                            <tr class="composition cufon">
                                {% for name, value in product.getUnserializeComposition %}
                                    <td>{{ value }}%<br />{{ name }}</td>
                                {% endfor %}
                            </tr>
                            <tr>
                                <td colspan="4"><hr /></td>
                            </tr>
                        </table>
                        <form action="{{ path('add_to_cart') }}" method="post" id="small-product-form-{{ product.id }}" class="product-form">
                            <input type="hidden" name="product_id" value="{{ product.id }}">
                        <table style="width: 100%;">
                            <td class="cufon small">Размер</td>
                            <td class="t1">
                                <div class="select-bg white">
                                    <div class="slyled-w">
                                        <select class="styled" name="size">
                                            {% for size in product.sizes %}
                                                <option value="{{ size.id }}">{{ size }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td class="cufon small t2">Кол-во</td>
                            <td>
                                <div class="select-bg white">
                                    <div class="slyled-w">
                                        <select class="styled count-product-mini" name="count">
                                            <option value="1" data-price="{{ product.getPricePerNumberItems(1) }}">1</option>
                                            <option value="5" data-price="{{ product.getPricePerNumberItems(5) }}">5</option>
                                            <option value="15" data-price="{{ product.getPricePerNumberItems(10) }}">15</option>
                                            <option value="30" data-price="{{ product.getPricePerNumberItems(15) }}">30</option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            </tr>
                            <tr class="tp">
                                <td colspan="2" class="total-price"><div class="cufon">Цена {{ product.price }} Руб.</div></td>
                                <td colspan="2"><a href="#small-product-{{ product.id }}" class="submit-button" data-form-id="small-product-form-{{ product.id }}"><img src="{{ asset('img/add-to-cart-overlay.png') }}" alt="" /></a></td>
                            </tr>
                        </table>
                        </form>
                    </div>
                </div>
                <h3 class="featured-product show-product-popup" data-popup-number="{{ product.id }}" style="margin-bottom: 30px">
                    <a href="javascript:void(0)">{{ product.name }}</a>
                </h3>
        </div>

        <form action="{{ path('add_to_cart') }}" method="post" id="full-product-form-{{ product.id }}" class="product-form">
        <input type="hidden" name="product_id" value="{{ product.id }}">
        <div id="product-popup" data-number="{{ product.id }}" style="display: none;">
            <div class="bg"></div>
            <div class="popup">
                <div class="popup-top"></div>
                <div class="popup-content">

                    <h2 class="cufon">{{ product.name }}</h2>
                    <a class="close cufon" href="javascript:void(0)" data-popup-number="{{ product.id }}">закрыть</a>

                    <div class="gallery">
                        <div class="main-image">
                            <img src="{{ product.getWebPath() | apply_filter('page_product')}}"  alt="" class="main-image-picture" /><span></span></div>

                            {% if product.images|length %}
                                <div class="thumb">
                                    <img src="{{ product.getWebPath() | apply_filter('page_product_small') }}" data-img-url="{{ product.getWebPath() | apply_filter('page_product') }}" alt="" />
                                    <span class="current"></span>
                                </div>
                            {% endif %}

                            {% for image in product.images %}
                                <div class="thumb">
                                    <img src="{{ image.getWebPath() | apply_filter('page_product_small') }}" data-img-url="{{ image.getWebPath() | apply_filter('page_product') }}" alt="" />
                                    <span class=""></span>
                                </div>
                            {% endfor %}
                    </div>

                    <div class="info">
                        <p class="cufon">{{ product.description }}</p>

                        <ul class="colors">
                            {% for color in product.colors %}
                            <li style="background-color: #{{ color.code }}"></li>
                            {% endfor %}
                        </ul>

                        <table class="composition cufon">
                            <tr>
                                {% for name, value in product.getUnserializeComposition %}
                                    <td>{{ value }}% {{ name }}</td>
                                {% endfor %}
                            </tr>
                        </table>

                        <div class="social" style="height: 40px">
                            <div class="share42init" data-url="http://{{ app.request.server.get('HTTP_HOST')}}{{ app.request.server.get('REQUEST_URI') }}#product-{{ product.id }}" data-title="«Возьми носки» – интернет магазин в котором представлены носки из натуральных материалов. Носки, которые мы продаем, сделаны на современном итальянском оборудовании (не старше 3 лет) – поэтому они тонкие, создают комфорт для ног в течение всего дня. А небольшое количество современных полимеров делают носки прочными, долговечными, и позволяют им «тянуться»."></div>
                        </div>
                        <hr />

                        <table class="choise">
                            <tr class="cufon h">
                                <td>Размер</td>
                                <td>Цвет</td>
                                <td>Кол-во</td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="select-bg grey">
                                        <div class="slyled-w">
                                            <select class="styled" name="size">
                                                {% for size in product.sizes %}
                                                    <option value="{{ size.id }}">{{ size }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="select-bg grey">
                                        <div class="slyled-w">
                                            <select class="styled" name="color">
                                                {% for color in product.colors %}
                                                    <option value="{{ color.id }}">{{ color.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="select-bg grey">
                                        <div class="slyled-w">
                                            <select class="styled count-product" name="count">
                                                <option value="1" data-price="{{ product.getPricePerNumberItems(1) }}">1</option>
                                                <option value="5" data-price="{{ product.getPricePerNumberItems(5) }}">5</option>
                                                <option value="15" data-price="{{ product.getPricePerNumberItems(15) }}">15</option>
                                                <option value="30" data-price="{{ product.getPricePerNumberItems(30) }}">30</option>
                                            </select>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>

                        <div class="total-price cufon">{{ product.price }} <small>P</small></div>

                        <div class="add-to-cart"><a href="#" class="submit-button" data-form-id="full-product-form-{{ product.id }}"><img src="{{ asset('img/add-to-cart.png') }}" alt="" /></a></div>

                        <div class="sale">
                            <h3>Купить комплект со скидкой</h3>
                            <input type="radio" name="sale" class="sale-radio-button" value="5" data-price="{{ product.getPricePerNumberItems(5) }}"><span class="cufon">Комплект 5 пар - {{ product.getPricePerNumberItems(5) }} Руб.</span><br>
                            <input type="radio" name="sale" class="sale-radio-button" value="15" data-price="{{ product.getPricePerNumberItems(15) }}"><span class="cufon">Комплект 15 пар - {{ product.getPricePerNumberItems(15) }} Руб.</span><br>
                            <input type="radio" name="sale" class="sale-radio-button" value="30" data-price="{{ product.getPricePerNumberItems(30) }}"><span class="cufon">Комплект 30 пар - {{ product.getPricePerNumberItems(30) }} Руб.</span>
                        </div>
                    </div>

                </div>
                <div class="popup-bottom"></div>
            </div>
        </div>
        </form>

        {% endfor %}
    </div>
    </div>
</div>
<div class="wrap bottom-roundness"></div>

<div class="wrap top-roundness"></div>
<div id="info" class="stitched wrap">
    <div class="third">
        <img src="{{ asset('img/info1.png') }}" alt="" />
        <p><strong>«Возьми носки»</strong> – интернет магазин в котором представлены носки из натуральных
            материалов. Носки, которые мы продаем, сделаны на современном итальянском оборудовании (не старше
            3 лет) – поэтому они тонкие, создают комфорт для ног в течение всего дня. А небольшое количество
            современных полимеров делают носки прочными, долговечными, и позволяют им «тянуться».</p>
    </div>
    <div class="third">
        <img src="{{ asset('img/info2.png') }}" alt="" />
        <p>Вам нужно просто купить носки – наш магазин отличный способ для этого, здесь только
            высококачественные носки из лучших материалов. А бесплатная доставка носков по всей России и удобные
            способы оплаты сделают покупку носков приятным делом.</p>
    </div>
    <div class="third">
        <img src="{{ asset('img/info3.png') }}" alt="" />
        <p>Хотите купить носки оптом – тоже к нам, «возьми носки» предоставит отличную скидку за упаковку из
            15 или 30 пар. Такая покупка надолго избавит Вас от необходимости судорожно искать подходящие носки
            в ответственные моменты – перед деловой встречей, свиданием или банальным походом в гости.</p>
    </div>
</div>

    <script type="text/javascript">
        <!--

        {% if product_was_added %}
        alert('Продукт был добавлен в корзину');
        {% endif %}

        //-->
    </script>
{% endblock %}